<template>
  <div id="decode-dialog">
    <div>
      <label>加密类型:</label>
      <el-select v-model="fromData.type" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div>
      <el-upload
          class="upload"
          ref="upload"
          action="http://127.0.0.1:8081/decode"
          :auto-upload = "false"
          :with-credentials="true"
          :on-success="showContent"
          :data = "fromData"
          :limit="1">
        <img class="upload" slot="trigger" src="~assets/images/upload.svg">
      </el-upload>
    </div>
    <div>
      <div>解密内容：</div>
      <el-input
          type="textarea"
          :rows="2"
          v-model="decodeContent"
          placeholder="请输入内容" disabled>
      </el-input>
    </div>
    <button @click="submitAll">确定</button>
  </div>
</template>

<script>
export default {
  name: "DecodeDialog",
  data(){
    return{
      decodeContent: '',
      options:[
        {
          value: '0',
          label: '基于等号隐藏'
        },
        {
          value: '1',
          label: '基于属性值隐藏'
        }
      ],
      fromData: {
        type: '0'
      }
    }
  },
  methods: {
    submitAll(){
      this.$refs.upload.submit();
    },

    showContent(response, file, fileList){
      if (!response){
        this.decodeContent = '无法提取信息';
      }else{
        this.decodeContent = response;
      }

    },

    show(){
      console.log(this.decodeContent)
    }
  }
}
</script>

<style scoped>

.upload {
  height: 27px;
  margin-left: 20px;
  cursor: pointer;
}

#decode-dialog {
  padding-left: 20px;
}

#decode-dialog div{
  margin-top: 20px;
}

</style>
